<template>
	<view>
		<cu-custom :isBack="false" bgColor="bg-white solids-bottom text-darkGray">
			<block slot="content">
				消息
			</block>
			<block slot="right"></block>
		</cu-custom>
		<view class="warp30"></view>
		<view>
			<view class="cu-list grid col-4 no-border">
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<view class="cuIcon text-mauve">
							<image src="/static/msg/icon_yw.png" class="png" mode="aspectFit"></image>
							<view class="cu-tag badge">
								<block>50</block>
							</view>
						</view>
						<text>与我相关</text>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<view class="cuIcon text-mauve">
							<image src="/static/msg/icon_sx.png" class="png" mode="aspectFit"></image>
							<view class="cu-tag badge">
								<block>99+</block>
							</view>
						</view>
						<text>私信</text>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<view class="cuIcon text-mauve">
							<image src="/static/msg/icon_gg.png" class="png" mode="aspectFit"></image>
						</view>
						<text>公告</text>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<view class="cuIcon text-mauve">
							<image src="/static/msg/icon_xs.png" class="png" mode="aspectFit"></image>
						</view>
						<text>悬赏</text>
					</navigator>
				</view>
			</view>
		</view>
		<view class="warp30"></view>
		<view class="cu-list menu solids-bottom">
			<view class="cu-item arrow">
				<view class="content">
					<image src="/static/msg/sicon_xs.png" class="png" mode="aspectFit"></image>
					<text class="text-grey">悬赏池</text>
				</view>
			</view>
		</view>
		<view class="model">
			<view class="model-main">
				<view class="uni-row model-item">
					<view class="cu-avatar-box">
						<view class="uni-flex margin-bottom-sm">
							<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
							<view style="flex: 1;">
								<view class="cu-avatar-name">李茜茜</view>
								<view class="cu-avatar-num">
									<text class="margin-right-sm">2019-03-04 15:00:00</text>
								</view>
							</view>
						</view>
						<view class="cu-avatar-main margin-bottom-sm">
							<view class="uni-flex margin-bottom-sm">
								<view class="cu-avatar-main-label">悬赏内容</view>
								<view class="cu-avatar-main-main">转发一条房源转发一条房源转发一条房源转发一条房源(最多76字符)</view>
							</view>
							<view class="uni-flex margin-bottom-sm">
								<view class="cu-avatar-main-label">悬赏价格</view>
								<view class="cu-avatar-main-main">2元</view>
							</view>
							<view class="uni-flex margin-bottom-sm">
								<view class="cu-avatar-main-label">悬赏时间</view>
								<view class="cu-avatar-main-main">2019-03-04 至 2019-03-05</view>
							</view>
						</view>
						<view class="cu-avatar-url">
							<view class="uni-flex padding-sm">
								<image class="cu-avatar-url-img" src="/static/top.jpg"></image>
								<view class="cu-avatar-url-main margin-left-sm">
									<text class="title">出售住宅 普通住宅 吉大 华发又一城</text>
									<text class="more">250万 4室2厅 150平米 19楼</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="uni-row model-item">
					<view class="cu-avatar-box">
						<view class="uni-flex margin-bottom-sm">
							<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
							<view style="flex: 1;">
								<view class="cu-avatar-name">李茜茜</view>
								<view class="cu-avatar-num">
									<text class="margin-right-sm">2019-03-04 15:00:00</text>
								</view>
							</view>
						</view>
						<view class="cu-avatar-main margin-bottom-sm">
							<view class="uni-flex margin-bottom-sm">
								<view class="cu-avatar-main-label">悬赏内容</view>
								<view class="cu-avatar-main-main">转发一条房源转发一条房源转发一条房源转发一条房源(最多76字符)</view>
							</view>
							<view class="uni-flex margin-bottom-sm">
								<view class="cu-avatar-main-label">悬赏价格</view>
								<view class="cu-avatar-main-main">2元</view>
							</view>
							<view class="uni-flex margin-bottom-sm">
								<view class="cu-avatar-main-label">悬赏时间</view>
								<view class="cu-avatar-main-main">2019-03-04 至 2019-03-05</view>
							</view>
						</view>
						<view class="cu-avatar-url">
							<view class="uni-flex padding-sm">
								<image class="cu-avatar-url-img" src="/static/top.jpg"></image>
								<view class="cu-avatar-url-main margin-left-sm">
									<text class="title">出售住宅 普通住宅 吉大 华发又一城</text>
									<text class="more">250万 4室2厅 150平米 19楼</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="warp30"></view>
		<view class="cu-list menu solids-bottom">
			<view class="cu-item arrow">
				<view class="content">
					<image src="/static/msg/sicon_gg.png" class="png" mode="aspectFit"></image>
					<text class="text-grey">公告</text>
				</view>
			</view>
		</view>
		<view class="model">
			<view class="model-main">
				<view class="uni-row model-item">
					<view class="cu-avatar-box">
						<view class="uni-flex margin-bottom-sm">
							<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
							<view style="flex: 1;">
								<view class="cu-avatar-name">李茜茜</view>
								<view class="cu-avatar-num">
									<text class="margin-right-sm">2019-03-04 15:00:00</text>
								</view>
							</view>
						</view>
						<view class="cu-avatar-main margin-bottom-sm">
							妇女节放假半天妇女节放假半天妇女节放假半天妇女节放假半天
						</view>
					</view>
				</view>
				<view class="uni-row model-item">
					<view class="cu-avatar-box">
						<view class="uni-flex margin-bottom-sm">
							<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
							<view style="flex: 1;">
								<view class="cu-avatar-name">李茜茜</view>
								<view class="cu-avatar-num">
									<text class="margin-right-sm">2019-03-04 15:00:00</text>
								</view>
							</view>
						</view>
						<view class="cu-avatar-main margin-bottom-sm">
							妇女节放假半天妇女节放假半天妇女节放假半天妇女节放假半天
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="warp30"></view>
		
		<view class="cu-list menu solids-bottom">
			<view class="cu-item arrow">
				<view class="content">
					<image src="/static/msg/sicon_sx.png" class="png" mode="aspectFit"></image>
					<text class="text-grey">私信</text>
				</view>
			</view>
		</view>
		<view class="model">
			<view class="model-main">
				<view class="uni-row model-item">
					<view class="cu-avatar-box">
						<view class="uni-flex margin-bottom-sm">
							<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
							<view style="flex: 1;">
								<view class="cu-avatar-name">李茜茜<text class="time">11:31</text></view>
								<view class="cu-avatar-name">
									今天可以看房吗今天可以看房吗今天可以看房吗今天可以看房吗今天可以看房吗今天可以看房吗今天可以看房吗
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="uni-row model-item">
					<view class="cu-avatar-box">
						<view class="uni-flex margin-bottom-sm">
							<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
							<view style="flex: 1;">
								<view class="cu-avatar-name">李茜茜<text class="time">11:31</text></view>
								<view class="cu-avatar-name">
									今天可以看房吗今天可以看房吗今天可以看房吗今天可以看房吗今天可以看房吗今天可以看房吗今天可以看房吗
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="warp30"></view>
		<view class="cu-list menu solids-bottom">
			<view class="cu-item arrow">
				<view class="content">
					<image src="/static/msg/sicon_a.png" class="png" mode="aspectFit"></image>
					<text class="text-grey">与我相关</text>
				</view>
			</view>
		</view>
		<view class="model">
			<view class="model-main">
				<view class="uni-row model-item">
					<view class="cu-avatar-box">
						<view class="uni-flex margin-bottom-sm">
							<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
							<view style="flex: 1;">
								<view class="cu-avatar-name">李茜茜</view>
								<view class="cu-avatar-num">
									<text class="margin-right-sm">2019-03-04 15:00:00</text>
								</view>
							</view>
						</view>
						<view class="cu-avatar-main margin-bottom-sm">
							妇女节放假半天妇女节放假半天妇女节放假半天妇女节放假半天
						</view>
					</view>
				</view>
				<view class="uni-row model-item">
					<view class="cu-avatar-box">
						<view class="uni-flex margin-bottom-sm">
							<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
							<view style="flex: 1;">
								<view class="cu-avatar-name">李茜茜</view>
								<view class="cu-avatar-num">
									<text class="margin-right-sm">2019-03-04 15:00:00</text>
								</view>
							</view>
						</view>
						<view class="cu-avatar-main margin-bottom-sm">
							妇女节放假半天妇女节放假半天妇女节放假半天妇女节放假半天
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="warp30"></view>
		<view class="cu-tabbar-height wx"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		mounted:function(){
		},
	}
</script>

<style lang="less">
	.cu-list.grid.col-4>.cu-item 
	{
		[class*=cuIcon]{
			line-height: 1;
			.png{
				width:100%;
				height: calc(12.5vw - 1upx)
			}
		}
	}
	.cu-list.menu>.cu-item .content>image{
		vertical-align: middle;
		width: 1em;
		height: 1em;
	}
	.model-main>.uni-row.model-item{
		padding: 30upx;
		overflow: hidden;
		position: relative;
		&:after{
			content: "";
			display: block;
			height: 2upx;
			width: 100%;
			background: #CCCCCC;
			left: 30upx;
			bottom: 0;
			position: absolute;
		}
		&:last-child:after{
			display: none;
		}
		.cu-avatar-box{
			.cu-avatar-name{
				font-size: 32upx;
				color: #333333;
				line-height: 48upx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				.time{
					float: right;
					font-size: 28upx;
					color: #999999;
					line-height: 48upx;
				}
				+.cu-avatar-name{
					font-size: 28upx;
				}
			}
			.cu-avatar-num{
				font-size: 28upx;
				color: #999999;
				line-height: 48upx;
			}
			.cu-avatar-main{
				.cu-avatar-main-label{
					width: 140upx;
					color: #999999;
				}
				.cu-avatar-main-main{
					flex: 1;
				}
			}
			.cu-avatar-url{
				.padding-sm{
					background: #f2f2f2;
					.cu-avatar-url-img{
						width: 120upx;
						height: 90upx;
					}
					.cu-avatar-url-main{
						flex: 1;
						.title{
							color: #666666;
							font-size: 28upx;
							line-height: 50upx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
						.more{
							color: #666666;
							font-size: 24upx;
							line-height: 40upx;
						}
					}
				}
			}
		}
	}
</style>
